<template>
	<!-- <geek-upgrade></geek-upgrade> -->
	<view v-if="visible" class="mark">
		<view class="view-dialog">
			<text class="title">{{title}}</text>
			<view class="tip">{{!downloading ? `${version}更新内容` : '正在下载升级包，请稍候！'}}</view>
			<scroll-view v-if="!downloading" class="scroll" scroll-y>
				<view class="item" v-for="(item,index) in contents" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view v-if="!downloading" class="btns">
				<view class="sure" @click="onSureClick()">立即更新</view>
			</view>
			<cmd-progress v-else class="progress" stroke-color="#288de7" :percent="progress"></cmd-progress>
			
			<view class="close" v-if="!downloading" @click="hide">
				<image class="icon" src="/static/images/upgrade/close.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdProgress from './cmd-progress.vue'
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				visible: false,
				progress: 0,
				downloading: false,
				success: true
			}
		},
		props: {
			type: {
				type: String,
				default: 'pkg'
			},
			version: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default:'版本更新'
			},
			content: {
				type: String,
				default: ""
			}
		},
		computed:{
			contents(){
                return this.content.split('\n') || []
            }
		},
		methods: {
			show(forceUpdate = false) {
				setTimeout(() => {
					if(this.success){
						this.visible = true
						 uni.hideTabBar()
						if(forceUpdate){
							this.onSureClick()
						}
					}
				}, 100);
			},
			hide(){
				const self = this
				uni.showTabBar()
				uni.setStorage({
					key: 'noUpgrade',
					data: true,
					success: function () {
						self.visible = false
					}
				});
			},
			onSureClick(){
				var platform = uni.getSystemInfoSync().platform
				if(platform == 'ios' && this.type == 'pkg'){
					plus.runtime.openURL(this.url);
				}else{
					this.downloading = true
					var downloadTask = uni.downloadFile({
						url: this.url,
						success: (downloadResult) => {
							console.log(downloadResult);
							this.hide()
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, (e) => {
									console.log(e);
									this.success = false
									uni.showToast({
										title: '安装升级包失败',
										icon: 'none'
									})
								});
							}
						}
					});
					downloadTask.onProgressUpdate((e)=>{
						this.progress = e.progress
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mark{
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0,0,0,0.6);
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	
	.view-dialog{
		width: 493rpx;
		border-radius:0 0 36rpx 36upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		margin-top: 220rpx;
		background: url('/static/images/upgrade/body.png') center center repeat-y;
		background-size: contain;
		
		.title{
			font-weight: 600;
			font-size: 30rpx;
			padding: 0 20rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
		
		&::before,&::after{
			content:"";
			display: block;
			width: 493rpx;
			position: absolute;
		}
		
		&::before{
			height: 261rpx;
			background: url('/static/images/upgrade/top.png') center center no-repeat;
			background-size: contain;
			top: -261rpx;
		}
		
		&::after{
			height: 163rpx;
			background: url('/static/images/upgrade/footer.png') center center no-repeat;
			background-size: contain;
			bottom: -2rpx;
		}
	}
	
	.tip{
		font-size: 28upx;
		font-weight: 500;
		color: black;
		margin-bottom: 26rpx;
		padding: 0 40rpx;
	}
	
	.scroll{
		width: 100%;
		height: 240upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.item{
		text-align: left;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		padding: 0 70upx;
		margin-bottom: 5rpx;
	}
	
	.btns{
		width: 397rpx;
		height: 95rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 5;
		background: url('/static/images/upgrade/btn.png') center center no-repeat;
		background-size: contain;
		margin-bottom: 20rpx;
		cursor: pointer;
		
		.sure{
			padding: 0upx 0;
			text-align: center;
			font-weight: 400;
			font-size: 27rpx;
			color: #177EE8;
			font-weight: 500;
			margin-top: -12rpx;
		}
	}
	
	.close{
		position: absolute;
		bottom:-140rpx;
		cursor: pointer;
		.icon{
			width: 60upx;
			height: 60upx;
		}
	}
	
	.progress{
		margin-top: 10rpx;
		margin-bottom: 190upx;
		position: relative;
		z-index: 5;
	}
	
</style>
